<template>
  <div>
    <div style="border-bottom: 1px solid #d8d8d8">
      <van-nav-bar
        title="我的资料"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="main-1">
      <div id="tx">
        <span>头像</span>
        <p><van-image
          round
          width="1.5rem"
          height="1.5rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
</p>
      </div>
      <div id="uname">
        <span>昵称</span>
        <p>{{ userName }}<van-icon name="arrow" /></p>
      </div>
      <div id="usex">
        <span>性别</span>
        <p>{{ userSex==1?'男':'女'}}<van-icon name="arrow" /></p>
      </div>
      <van-cell
        title="账号安全"
        is-link
        value="安全等级:高"
      />
      <van-cell
        title="修改密码"
        is-link
        value="点击前往"
        @click="$router.push('/Mecipher')"
      />

      <van-field style=".van-field_control {text-align: right;}"
        v-model="fieldValue"
        is-link
        readonly
        label="地区"
        placeholder="请选择所在地区"
        @click="show = true"
        class="upend"
      />

      <van-popup v-model:show="show" round position="bottom">
        <van-cascader 
          v-model="cascaderValue"
          title="请选择所在地区"
          :options="options"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>
      <div id="utext">
        <span>个人简介</span>
        <textarea></textarea>
      </div>
    </div>
    <div id="next-a">
      <van-button
        round
        type="primary"
        size="large"
        color="linear-gradient(to right, #2CD6E8, #405FD8)"
        @click="userOut"
        >退出登录</van-button
      >
    </div>
  </div>
</template>
<script setup>
import { createApp } from "vue";
import { NavBar } from "vant";
import { ref } from "vue";
import { useCascaderAreaData } from "@vant/area-data";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const app = createApp();
app.use(NavBar);
const store = useStore()
const userName = store.state.user.user_name
const userSex = store.state.user.user_sex
const userText = store.state.user.user_text


const router = useRouter();
const onClickLeft = () => history.back();
const show = ref(false);
const fieldValue = ref("");
const cascaderValue = ref("");
const options = useCascaderAreaData();
const onFinish = ({ selectedOptions }) => {
  show.value = false;
  fieldValue.value = selectedOptions.map((option) => option.text).join("/");
};
const userOut = () => {
  console.log(store.state.user)
  store.commit("updateUser", "");
  store.commit("saveToken", "");
  console.log(store.state.user)
  router.push("/");
};
</script>

<style scoped>
#next-a {
  width: 80vw;
  margin: 1vh 10vw;
}
#uname{
 font-size: 14px;
  display: flex;
  padding: 10px 0;
}
#uname span{
  width: 45%;
  text-align: left;
  margin-left: 4%;
}
#uname p{
  width: 47%;
  text-align: right;
}
#tx{
 font-size: 14px;
  display: flex;
  padding-top: 10px;
}
#tx span{
  width: 45%;
  text-align: left;
  margin-left: 4%;
}
#tx p{
  width: 43%;
  text-align: right;
}
#usex{
 font-size: 14px;
  display: flex;
  padding: 10px 0;
}
#usex span{
  width: 45%;
  text-align: left;
  margin-left: 4%;
}
#usex p{
  width: 47%;
  text-align: right;
}
#utext{
 font-size: 14px;
  display: flex;
  padding: 10px 0;
}
#utext span{
  width: 45%;
  text-align: left;
  margin-left: 4%;
}
#utext textarea{
  width: 43%;
  height: 24px;
  text-align: right;
  border: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>